<template>
    <div class="prolist">
        <ul>
            <li class="proItem" v-for="item in pro" :key="item.id">
                <div class="itemImage">
                    <van-image :src="item.img1" fit="cover"></van-image>
                </div>
                <div class="itemInfo">
                    <div class="title"><van-text-ellipsis :content="item.proname" /></div>
                    <div class="price">¥{{ item.originprice }}</div> 
                </div>
            </li>
           
        </ul>
    </div>
</template>

<script>
export default {
    name: "prolist",
    props: ['pro']
}
</script>

<style scoped lang="less">

.prolist >ul{
  display: flex;
  flex-wrap: wrap;

  .proItem {
    width: 46%;
    margin: 8px 2%;
    min-height: 2.6rem;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;

    .itemImage {
      width: 100%;
      height: 80px;

      .van-image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .itemInfo {
      padding: 10px;

      .price {
        color: #f66;
        margin-top: 5px;
      }

      .other {
        margin-top: 5px;
      }
    }
  }
}
    
</style>